<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="true" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<view class="waterfall-container">
			<view class="waterfall" v-for="(item, index) in flowList" :key="item.offerId">
				<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
				<u-lazy-load threshold="-450" border-radius="10"
					:image="'http://localhost:8088'+item.image.split(',')[0]" :index="index"></u-lazy-load>
				<view class="waterfall-title">{{ item.comName }}</view>
				<view class="waterfall-price">赏金：<span>{{ item.money }}元</span></view>
				<view class="waterfall-btn">
					<view class="waterfall-btn-detail">
						<u-button size="mini" shape="square" @click="showDetail(item)">查看详情</u-button>
					</view>
					<view v-if="offerIds.indexOf(item.offerId) > -1" class="waterfall-btn-success">
						<u-button size="mini" type="error" plain shape="square" disabled>等候通过</u-button>
					</view>
					<view v-else class="waterfall-btn-apply">
						<u-button size="mini" type="success" shape="square" @click="toApply(item.offerId,item.iuserId)">申请领取</u-button>
					</view>
					
				</view>
			</view>
		</view>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="status" @loadmore="addRandomData"></u-loadmore>
		<view>
			<u-modal v-model="show" title="详情信息" confirm-text="关闭" :content-style="{padding: '35rpx 20rpx'}">
				<view class="slot-content">
					<view class="wrap">
						<u-lazy-load threshold="-450" border-radius="10"
							:image="wrapData.image == null?'':'http://localhost:8088'+wrapData.image.split(',')[0]">
						</u-lazy-load>
						<view class="waterfall-title">{{ wrapData.comName }}</view>
						<view class="waterfall-price">赏金：<span>{{ wrapData.money }}元</span></view>
						<view class="wrap-user">
							<view class="wrap-user-first">金主：</view>
							<view class="wrap-user-last">{{wrapData.iuserName}}</view>
						</view>
						<view class="wrap-remark">
							<view class="wrap-remark-first">备注：</view>
							<view class="wrap-remark-last">
								<rich-text :nodes="wrapData.comDesc"></rich-text>
							</view>
						</view>
					</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				title: "悬赏榜",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				status: 'loadmore',
				flowList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				pageTotal: 0,
				show: false,
				wrapData: [],
				offerIds:[]
			}
		},
		computed: {
			...mapGetters(['getUserInfo'])
		},
		onLoad() {
			this.getMyApplyOfferId();
			this.getPriceList();
		},
		onShow() {
			this.getMyApplyOfferId();
		},
		onReachBottom() {
			this.addRandomData();
		},
		methods: {
			getPriceList() {
				Vue.prototype.$u.api.getPriceList({
					pageNum: this.queryParams.pageNum,
					pageSize: this.queryParams.pageSize,
				}).then(res => {
					if (res.total < this.queryParams.pageSize) {
						this.status = 'nomore'
					}
					this.pageTotal = Math.ceil(res.total / this.queryParams.pageSize);
					if (res.code == 200 && res.rows.length > 0) {
						this.flowList = res.rows
					} else {
						this.flowList = []
					}
				})
			},
			getMyApplyOfferId(){
				Vue.prototype.$u.api.getMyApplyOfferId({
					userId: this.getUserInfo.userId
				}).then(res => {
					if(res.code == 200){
						this.offerIds = res.data
					}else{
						this.offerIds = []
					}
				})
			},
			addRandomData() {
				this.status = 'loading';
				this.queryParams.pageNum = ++this.queryParams.pageNum;
				if (this.queryParams.pageNum <= this.pageTotal) {
					setTimeout(() => {
						Vue.prototype.$u.api.getPriceList({
							pageNum: this.queryParams.pageNum,
							pageSize: this.queryParams.pageSize,
						}).then(res => {
							if (res.code == 200 && res.rows.length > 0) {
								this.flowList = this.flowList.concat(res.rows)
								this.status = 'loadmore';
							} else {
								this.status = 'nomore'
							}
						})
					}, 2000)
				} else {
					this.status = 'nomore'
				}
			},
			showDetail(item) {
				this.wrapData = item;
				this.show = true;
			},
			toApply(offerId, iuserId) {
				if (this.getUserInfo.userId == iuserId) {
					Vue.prototype.$u.toast("抱歉！您不能领取自己的悬赏！");
				} else {
					uni.navigateTo({
						url: '/pages/apply/index?offerId=' + offerId
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.waterfall-container{
		display: flex;
		justify-content: center;
		align-content: center; //主轴居中对齐
		align-items: center; //交叉轴的中点对齐
		flex-direction:row; 
		flex-wrap:wrap;
	}
	
	.waterfall {
		width: 350rpx;
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.waterfall-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
		font-weight: bold;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.waterfall-price {
		margin-top: 5px;
	}

	.waterfall-price>span {
		color: $u-type-error;
		font-weight: bold;
	}

	.waterfall-btn {
		display: flex;
		margin-top: 10px;
		justify-content:space-between;
		padding: 0 10rpx;
	}

	.waterfall-btn-apply {
		
	}

	.waterfall-btn-success {
		
	}

	.wrap-remark {
		display: flex;
		margin-top: 10rpx;
	}

	.wrap-remark-first {
		flex-shrink: 0;
	}

	.wrap-user {
		display: flex;
		margin-top: 10rpx;
	}

	.wrap-user-first {
		flex-shrink: 0;
	}
</style>
